<template>
    <div class="wrap">
        <div class="left">
            <div>
                <img :src="phoneApp" style="width: 570px;height: 500px;">
            </div>
        </div>
        <div class="reset-password">

            <div class="reset-password-item">
                <a-input-password v-model:value="oldPassword" placeholder="请输入原密码" size="large"/>
            </div>
            <div class="reset-password-item">
                <a-input-password v-model:value="newPassword" placeholder="请输入新密码" size="large"/>
            </div>
            <div class="reset-password-item">
                <a-input-password v-model:value="checkPassword" placeholder="请再次输入新密码" size="large"/>
            </div>
            <div class="reset-password-item">
                <a-button @click="resetPsw" type="primary" block size="large">修改</a-button>
            </div>
        </div>
    </div>
</template>
<script>
    import {defineComponent, reactive, toRefs, onBeforeMount} from 'vue';
    import {SmileOutlined} from '@ant-design/icons-vue';
    import {message, Modal} from "ant-design-vue";
    import {getUserInfo} from "../../../utils/util";
    import {resetPassword} from "../../../api/admin";

    export default defineComponent({
        name: "ResetPassword",
        setup() {
            const state = reactive({
                id: "",
                oldPassword: "",
                newPassword: "",
                checkPassword: "",
                phoneApp: require("../../../assets/phone_app.png"),
            })
            const resetPsw = () => {
                if (state.oldPassword == "" || state.newPassword == "" || state.checkPassword == "") {
                    message.warning("任何一项不能为空");
                    return false;
                }
                if (state.newPassword != state.checkPassword) {
                    Modal.error({
                        title: "失败",
                        content: "密码修改失败，原因是：两次输入的密码不一致。",
                        centered: true,
                        okText: "确定"
                    })
                    return false;
                }

                resetPassword(state.id, state.oldPassword, state.newPassword)
                    .then(resp => {
                        if (resp.code == 200) {
                            Modal.success({
                                title: "成功",
                                content: "密码修改成功",
                                centered: true,
                                okText: "确定"
                            })
                        } else {
                            Modal.error({
                                title: "失败",
                                content: "密码修改失败，可能的原因是：" + resp.message + "。",
                                centered: true,
                                okText: "确定"
                            })
                        }
                    })
            }
            onBeforeMount(() => {
                const userInfo = getUserInfo();
                state.id = userInfo.user.id;
            })
            return {
                ...toRefs(state),
                resetPsw
            };
        },
        components: {
            SmileOutlined,
        },
    });
</script>
<style lang="less" scoped>
    .left{
        position: relative;
        top: 50px;
        left: 0;
    }
    .reset-password {
        padding-top: 50px;
        position: absolute;
        right: 200px;
        top: 30%;

        .reset-password-item {
            width: 350px;
            margin: 20px auto;
        }
    }

</style>

